<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header">
</head>


<body>

<nav th:replace="layouts::navbar"></nav>

<div class="container home">
    <div class="logo">
    </div>
    <p th:text="${versionNumber}"></p>
    <hr>




    <h4 class="second">当前商品</h4>
    <table class="table table-bordered table-striped commodity" style="width: 700px;">
        <thead class="thead-dark">
        <tr>
            <th>商品ID</th>
            <th>商品名称</th>
            <th>生产日期</th>
            <th>商品数量</th>
            <th>商品单价</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="aCommodity : ${commodities}">
            <td th:text="${aCommodity.commodityId}"></td>
            <td th:text="${aCommodity.name}"></td>
            <td th:text="${aCommodity.date}"></td>
            <td th:text="${aCommodity.number}"></td>
            <td th:text="${aCommodity.price}"></td>
        </tr>
        </tbody>
    </table>

    <div class="col-md-4 barChart">
        <canvas id="myChart" width="200" height="200"></canvas>
    </div>
    <script>
        let chartData="[[${kindTypeData}]]"
    </script>


</div>



<script type="text/javascript" th:src="@{/js/myChart.js}"></script>

</body>
</html>